<template>
	<uni-popup ref="popup" type="bottom" @change="change"  :maskClick="false">
		<view class="popup-content d-flex flex-column">
			<view class="d-flex justify-content-end" v-if="auto === false">
				<image src="/static/images/common/clousex-big.png" class="close_btn" @tap="close"></image>
			</view>
			<view class="d-flex flex-fill flex-column justify-content-between">
				<view class="d-flex flex-column">
					<view class="font-size-extra-lg font-weight-bold text-color-base mb-30">欢迎登陆{{brandName}}~</view>
					<view class="font-size-base text-color-assist">登录后享受更好的服务体验</view>
          <view class="font-size-base text-color-assist">新用户更有好礼相送</view>
				</view>
				<view class="d-flex flex-column">
<!--					<button  type="primary" class="w-100 font-size-lg mb-30" open-type="getUserInfo" bindgetuserinfo="bindGetUserInfo"-->
<!--						@getuserinfo="getUserInfo">微信一键登录</button> 点击登陆{{brandName}}，即表示-->

					<button type="primary" class="w-100 font-size-lg mb-30" @tap="getUserProfile" >微信一键登录</button>
					<view class="text-center mb-30 font-size-sm text-color-assist">
            <label class="radio" ><radio value="r1"  style="transform:scale(0.5);top: -3rpx;" color="#bc9048"  /></label>已阅读并同意<font class="text-color-primary">《{{brandName}}隐私政策》</font>
					</view>
					<view class="text-center font-primary font-size-sm text-color-primary">《{{brandName}}小程序服务指南》</view>
				</view>
			</view>
		</view>
	</uni-popup>
</template>

<script>
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	import {
		mapMutations
	} from 'vuex'

	export default {
		name: 'LoginPopup',
		components: {
			uniPopup
		},
		props: {
			auto: {
				type: Boolean,
				default: false
			}
		},
    data() {
      return {
        brandName: this.$api.brandName
      }
    },
		mounted() {
			if (!uni.getStorageSync("accessToken") && this.auto) {
				this.open();
			}
		},
		methods: {
			...mapMutations(['SET_USERINFO', 'SET_ISLOGIN']),
			async open() {
				this.$refs['popup'].open()
				uni.login({
					success:res=>{
						uni.setStorageSync("wxcode",res.code)
					}
				})
			},
			close() {
				this.$refs['popup'].close()
			},
			getUserProfile (){
				uni.getUserProfile({
					lang: 'zh_CN',
					desc:'Wexin',
					success:e=>{
						console.log(e)
						if (e.errMsg !== 'getUserProfile:ok') {
							uni.showModal({
								title: '提示',
								content: '您已取消了授权，请重新授权登录',
								showCancel: false
							})
							return
						}
						const { userInfo } = e
						this.$store.commit("login", userInfo);
					},
					fail:err=>{
						console.log("授权被拒绝,将使用默认的微信用户名称");
					}
				})
				this.$store.commit("login", {nickName:"微信用户"});
				this.loginIn()
			},
			change({
				show
			}) {
				this.$emit('change', show)
			},
			loginIn(){

				uni.login({
					provider: 'weixin',
					success: (wxres => {
						uni.showLoading({
							title: '登陆中',
						});
						this.$api.ajax({
							url: "/wx/lite/n/login",
							data: {
								// appid: this.commonData.appId,
								// secret: this.commonData.secret,
								loginType: 1,
                brandType: this.$api.brandId,
								ip: "127.0.0.1",
								raw: {
									code: wxres.code
								}
								// js_code: wxres.code
							},
							success: (res) => {
								console.log("登陆信息",res)
								const {
									errMsg,
									data
								} = res || {};
								if (errMsg === "request:ok") {
									// 成功获取到
									const {
										openId,
										id,
										avatarUrl,
										nickname,
										phone,
										level,
										accessToken
									} = data.data || {};
									// 先
									uni.setStorageSync('openId', openId);
									uni.setStorageSync('userId', id);
									uni.setStorageSync('phone', phone);
									uni.setStorageSync("accessToken", accessToken);
									this.close();
									this.$emit("sureGrant",id)
									this.$emit("reGet")
									uni.hideLoading()
								}
							}
						});
					})
				})

			},
			getUserInfo(e) {
				console.log("eee",e)
				this.tryFlag = 0;
				//请配置AppID，否则获取失败
				if (e.target.errMsg !== 'getUserInfo:ok') {
					uni.showModal({
						title: '提示',
						content: '您已取消了授权，请重新授权登录',
						showCancel: false
					})
					return
				}
				const { userInfo } = e.detail || {};
				const { avatarUrl, nickName } = userInfo || {};
				 // 微信头像和昵称放到缓存内
				// uni.setStorageSync("avatarUrl", avatarUrl);
				// uni.setStorageSync("nickName", nickName);
				uni.showLoading({
					title: '登陆中',
				});
				this.$store.commit("login", userInfo);
				uni.login({
					provider: 'weixin',
					success: (wxres => {
						this.$api.ajax({
							url: "/wx/lite/n/login",
							data: {
								// appid: this.commonData.appId,
								// secret: this.commonData.secret,
								loginType: 1,
                brandType: this.$api.brandId,
								ip: "127.0.0.1",
								raw: {
									code: wxres.code
								}
								// js_code: wxres.code
							},
							success: (res) => {
								console.log("登陆信息",res)
								const {
									errMsg,
									data
								} = res || {};
								if (errMsg === "request:ok") {
									// 成功获取到
									const {
										openId,
										id,
										avatarUrl,
										nickname,
										phone,
										level,
										accessToken
									} = data.data || {};
									// 先
									uni.setStorageSync('openId', openId);
									uni.setStorageSync('userId', id);
									uni.setStorageSync('phone', phone);
									uni.setStorageSync("accessToken", accessToken);
									this.close();
									this.$emit("reGet")
									uni.hideLoading()
								}
							}
						});
					})
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.popup-content {
		background-color: #FFFFFF;
		border-radius: 24rpx 24rpx 0 0;
		height: 50vh;
		padding: 50rpx 40rpx;
	}

	.close_btn {
		width: 40rpx;
		height: 40rpx;
	}
</style>
